import './index.css';
import './state.less';
import { Layout, Breadcrumb, Form, Input, Button, Select, Table, Pagination,DatePicker} from 'antd';
import React, { useState, useEffect } from 'react';
import Date from '../../components/Date'
import careStore from '../../store/carefulSrc';
import { observer } from 'mobx-react';
import http from '../../utils/http';

const { Column } = Table;
const { Content } = Layout;
function onChange(date, dateString) {
    console.log(date, dateString);
}
// 分页布局
function itemRender(current, type, originalElement) {
    if (type === 'prev') {
        return <a>上一页</a>;
    }
    if (type === 'next') {
        return <a>下一页</a>;
    }
    return originalElement;
}

function State(props) {
    // 传当前的 pathname 到公共的 careStore 中
    careStore.setPathName(props.location.pathname);
   

    const [form] = Form.useForm();

    // 一开始渲染数据
    const [tableList, setTableList] = useState([]);
    function getList(){
        http({
            url:'/currentState/list',

        }).then(res => {
            console.log(res.data);
            res.data && res.data.forEach(v => {
                v.runState = v.runState ? '启用' : '禁止';
                v.serveState = v.serveState ? '服务中' : '空闲';
                v.ability = (v.ability == 'undefined')?'无':v.ability;
                v.devices = (v.devices == 'undefined')?'无':v.devices;

            })
            setTableList(res.data)
        })
       
    }
    useEffect(()=>{
        getList();
    },[])

     // 筛选行的时间简化
     function formatTime2(time){
        let time2 = time.toString();
        let arr = time2.split(' ');
        // console.log(arr, arr[2]);
        let mon;
        switch (arr[1]){
            case 'Aug':
                mon = '08';
                break;
            case 'Sep':
                mon = '09';
                break;
        }
        let createTime3 = arr[3]+'-'+mon+'-'+arr[2];
        return createTime3;
    }
    // 上面的筛选行
    const onFinish = (values) => {
        console.log('Finish:', values);
        http({
            url:'/currentState/seePeople',
            // method:'post',
            data:{
                name:values.name,
                serviceArea:values.serviceArea,
                createTime:formatTime2(values.createTime._d),
                runState:values.runState=='启用'?1:0,
            }
        }).then(res => {
            console.log('筛选0',res);
            if(!res.error){
                console.log(111111111111,res.data);
                res.data && res.data.forEach(v => {
                    v.runState = v.runState ? '启用':'禁止';
                    v.serveState = v.serveState ? '服务中':'空闲';
                })
                setTableList(res.data);
                // console.log(list1);
                // getList();
            }
        })

    };


    return <div className="stateCss">
        <p className="breadCss">陪护员管理</p>
        <Breadcrumb className="breadCss2">
            <Breadcrumb.Item>订单管理</Breadcrumb.Item>
            <Breadcrumb.Item>订单详情</Breadcrumb.Item>
        </Breadcrumb>
        <Content
            className="dD_Css"
        >
            {/* 上面的筛选行 */}
            <div className="dateRow">
                <>
                    <Form
                        // onValuesChange={onFormLayoutChange}
                        layout="inline"
                        form={form}
                        size="middle"
                        className="formCss"
                        onFinish={onFinish}
                    >
                        {/* <div> */}

                       
                        <div className="formItemBox">

                            <Form.Item label="时间" name="createTime">
                                <DatePicker placeholder="请选择日期" />
                            </Form.Item>
                        </div>
                        <div className="formItemBox">
                            <Form.Item label="姓名" name="name">
                                <Input placeholder="请输入姓名" />
                            </Form.Item>
                        </div>
                        <div className="formItemBox">
                            <Form.Item label="区域" name="serviceArea">
                                <Select>
                                    <Select.Option value="外滩">外滩</Select.Option>
                                    <Select.Option value="黄浦江">黄浦江</Select.Option>
                                    <Select.Option value="人民广场">人民广场</Select.Option>
                                </Select>
                            </Form.Item>
                        </div>
                        <div className="formItemBox">
                            <Form.Item label="运行状态" name="runState">
                                <Select>
                                    <Select.Option value="启用">启用</Select.Option>
                                    <Select.Option value="禁止">禁止</Select.Option>
                                </Select>
                            </Form.Item>
                        </div>
                        <Form.Item >
                            <Button type="primary" htmlType="submit">筛选</Button>
                        </Form.Item>
                    </Form>
                </>
            </div>
            {/* 表格 */}
            <div className="tableBox">
                <Table
                    // columns={columns}
                    dataSource={tableList}
                    size="middle"
                    className="tableCss"
                    pagination={false}
                    rowKey="name"
                >

                    <Column title="姓名" dataIndex="name" key="2" />
                    <Column title="电话" dataIndex="tel" key="3" />
                    <Column title="区域" dataIndex="serviceArea" key="4" />
                    <Column title="能力范围" dataIndex="ability" key="4" />
                    <Column title="今日接单数" dataIndex="count" key="5" />
                    <Column title="设备" dataIndex="devices" key="5" />
                    <Column title="运行状态" dataIndex="runState" key="7" />
                    <Column title="服务状态" dataIndex="serveState" key="6" />
                    {/* <Column title="定位" dataIndex="position" key="6" /> */}
                    
                </Table>
            </div>
            {/* 分页 */}
            <div className="pageCss">
                <>
                    <Pagination
                        showSizeChanger
                        showTotal={total => ` ${total}条记录`}
                        total={15}
                        size="small"
                        // showQuickJumper
                        itemRender={itemRender}

                    />
                </>,
            </div>
        </Content>
    </div>
}
export default observer(State);